<template>
  <view>
    <u-popup :show="show" @close="close" mode="bottom" round="20rpx">
      <view class="popup-main">
        <view class="popup-head">
          <image src="@/static/img/collectPage/collect.png" mode=""></image>
          <view class="popup-title">
            <view>羊肉奥</view>
            <view>普通成员丨2024-01-01 加入</view>
          </view>
        </view>
        <view class="popup-nav">
          <view class="nav-row" v-for="item,index in list" :key="index" @click="onChange(item.type)">
            {{item.title}}
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    props:['show','list'], //todo 后续需要把头像、name、描述、传进来
    data() {
      return {

      }
    },
    methods:{
      close(){
        this.$emit('popupClose',false)
      },
      onChange(type){
        this.$emit('popupClick',type)
      }
    }
  }
</script>

<style lang="less" scoped>
  .popup-main {
    padding: 0 40rpx 50rpx 40rpx;
    box-sizing: border-box;

    .popup-head {
      height: 192rpx;
      width: 100%;
      display: flex;
      align-items: center;
      border-bottom: 4rpx solid #e6e6e6;

      image {
        height: 116rpx;
        width: 116rpx;
      }

      .popup-title {
        margin-left: 30rpx;

        :first-child {
          font-size: 36rpx;
          font-weight: 500;
          color: #313131;
        }

        :last-child {
          font-size: 32rpx;
          font-weight: 500;
          color: #909090;
          margin-top: 10rpx;
        }
      }

    }

    .popup-nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .nav-row {
        height: 44rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #313131;
        margin-top: 30rpx;
        text-align: center;
      }
    }
  }
</style>